.post-actions-wrap {
    height:      60px;
    padding:     0;
    line-height: 60px;
    clear:       both;

    ul.post-actions {
        float:        left;
        padding-left: 0;
        margin-top:   0;
        list-style:   none;

        li.post-action {
            width:      auto;
            text-align: center;
        }
    }
    // Post's navigation options
    ul.post-action-nav {
        // Best width for responsive post's navigation panel on small screen and up
        width:   35%;
        // On very small screen `.post-actions-nav` will be above `.post-actions-share`
        z-index: map-get($z-indexes, c-post-bottom-bar) + 2;

        li.post-action {
            float:     left;
            // Fix a bug on Firefox. the right part of button `previous` fall down without this `min-width`
            min-width: 45px;

            &:last-child {
                .post-action-btn {
                    margin-left: 15px;
                }
            }
        }
    }
    // Post's share options
    ul.post-action-share {
        // 100% minus width of `.post-action-nav`,
        // best width for responsive post's share panel on small screen and up
        width:   65%;
        // On very small screen `.post-actions-nav` will be above `.post-actions-share`
        z-index: map-get($z-indexes, c-post-bottom-bar) + 1;

        li.post-action {
            float: right;

            &:nth-child(n + 3) {
                .post-action-btn {
                    margin-right: 15px;
                }
            }
        }
    }
}

// Increase width of `.post-actions-share` on small screen
@media #{$small-and-down} {
    .post-actions-wrap {
        ul.post-action-nav {
            // Best width for responsive post's navigation panel on small screen
            width: 25%;
        }
        ul.post-action-share {
            // Best width for responsive post's share panel on small screen
            width: 75%;
        }
    }
}

// Increase width of `.post-actions-nav` on very small screen
@media #{$xsmall-and-down} {
    .post-actions-wrap {
        ul.post-action-nav {
            // Best width for responsive post's navigation panel on very small screen
            width: 35%;
        }
        ul.post-action-share {
            // Best width for responsive post's share panel on very small screen
            width: 65%;
        }
    }
}

// Hide post actions in print layout
@media print {
    .post-actions-wrap {
        display: none;
    }
}
